<template>
  <div class="flex justify_between design-header_content">
    <div class="flex justify_between align_center">
      <el-tooltip effect="dark" content="结构树" placement="bottom">
        <div class="header_tool" :class="designTreeShow?'':'no-active'" @click="handleTreeChange">
          <span class="iconfont icon-jiazhihuabu"></span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="组件" placement="bottom">
        <div class="header_tool" :class="designLibShow?'':'no-active'" @click="handleLibChange">
          <span class="iconfont icon-sub-unit"></span>
        </div>
      </el-tooltip>
      <el-divider direction="vertical"></el-divider>
      <el-tooltip effect="dark" content="保存" placement="bottom">
        <div class="header_tool">
          <span class="iconfont icon-save"></span>
        </div>
      </el-tooltip>
      <el-divider direction="vertical"></el-divider>
      <el-tooltip effect="dark" content="撤销" placement="bottom">
        <div class="header_tool">
          <span class="iconfont icon-chexiao"></span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="恢复" placement="bottom">
        <div class="header_tool">
          <span class="iconfont icon-qianjin"></span>
        </div>
      </el-tooltip>
      <el-divider direction="vertical"></el-divider>
      <el-tooltip effect="dark" content="清除画布" placement="bottom">
        <div class="header_tool" @click="handleClearComp">
          <span class="iconfont icon-qingchu"></span>
        </div>
      </el-tooltip>
      <el-divider direction="vertical"></el-divider>
      <el-tooltip effect="dark" content="工具箱" placement="bottom">
        <div class="header_tool" :class="designBarShow?'':'no-active'" @click="handleToolBarChange">
          <span class="iconfont icon-gongjuxiang"></span>
        </div>
      </el-tooltip>
    </div>
    <div class="white flex justify_between align_center">
      <div class="header_center">
        <span class="iconfont icon-gongjuxiang"></span><span class="fontsize_16 ml_8">p_1</span>
      </div>
    </div>
    <div class="flex justify_between align_center">
      <el-tooltip effect="dark" content="预览" placement="bottom">
        <div class="header_tool">
          <span class="iconfont icon-preview1"></span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="发布" placement="bottom">
        <div class="header_tool">
          <span class="iconfont icon-fabu"></span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="帮助" placement="bottom">
        <div class="header_tool">
          <span class="iconfont icon-bangzhu"></span>

        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="工具箱" placement="bottom">
        <div class="header_tool" @click="handleConfigChange" :class="designConfigShow?'':'no-active'">
          <span class="iconfont icon-youce"></span>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { useDesignStore } from "../../../../store/design";
import { computed, defineComponent } from "vue";

export default defineComponent({
  name: "design-header",
  setup() {
    const designStore = useDesignStore();
    const designTreeShow = computed(() => designStore.designTreeShow);
    const designLibShow = computed(() => designStore.designLibShow);
    const designConfigShow = computed(() => designStore.designConfigShow);
    const designBarShow = computed(() => designStore.designBarShow);
    const handleLibChange = () => {
      designStore.setDesignLibShow(designLibShow.value);
    };

    const handleTreeChange = () => {
      designStore.setDesignTreeShow(designTreeShow.value);
    };

    const handleClearComp = () => {};

    const handleToolBarChange = () => {
      designStore.setDesignBarShow(designBarShow.value);
    };
    const handleConfigChange = () => {
      designStore.setDesignConfigShow(designConfigShow.value);
    };
    return {
      designTreeShow,
      designLibShow,
      designConfigShow,
      designBarShow,
      handleLibChange,
      handleTreeChange,
      handleClearComp,
      handleToolBarChange,
      handleConfigChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "index.less";
</style>